<template>
  <div :id="uuid" class="echarts" />
</template>
<script setup>
import * as echarts from "echarts"
import { useElementSize } from "@vueuse/core"
import { useVisual } from "@/hooks/userEditor"
import { useEchartsTheme } from "./useChartTheme"

const { setTheme } = useEchartsTheme()
const { commonStyle } = useVisual()
const uuid = g.guid(18)
let myChart = null
let chartDom = null
onMounted(() => {
  chartDom = document.getElementById(uuid)
  const { width, height } = useElementSize(chartDom)
  myChart = echarts.init(chartDom)
  watch([width, height], () => {
    myChart.resize()
  })
})
const getOption = ref({
  tooltip: {
    textStyle: {}
  }
})
const textStyle = computed(() => {
  return {
    fontSize: getOption.value.tooltip.textStyle.fontSize + "px",
    color: getOption.value.tooltip.textStyle.fontColor,
    fontWeight: getOption.value.tooltip.textStyle.fontWeight + "px",
    height: getOption.value.tooltip.textStyle.height + "px",
    backgroundColor: getOption.value.tooltip.backgroundColor
  }
})
const init = (option) => {
  getOption.value = g.Copy(option)
  myChart?.dispose()
  const theme = option.theme || commonStyle.value.registerTheme
  setTheme(echarts, theme)
  myChart = echarts.init(chartDom, theme)
  option && myChart.setOption(option, true)
}

const dispose = () => {
  myChart?.dispose()
}

defineExpose({
  init,
  dispose
})
</script>

<style lang="less">
.echarts {
  width: 100%;
  height: 100%;
}
.echarts-tooltip-diy {
  background: v-bind("textStyle?.backgroundColor") !important;
  border: none !important;
  backdrop-filter: blur(10px) !important;
  /* Note: backdrop-filter has minimal browser support */
  border-radius: 6px !important;
  box-shadow: 1px 1px 30px rgba(0, 0, 0, 1) !important;
  .content-panel {
    display: flex;
    justify-content: space-between;
    padding: 0 9px;
    line-height: v-bind("textStyle?.height") !important;
    height: v-bind("textStyle?.height") !important;
    border-radius: 4px;
    margin-bottom: 4px;
    align-items: center;
    background: v-bind("textStyle?.backgroundColor") !important;
  }
  .tooltip-title {
    margin: 0 0 10px 0;
    text-align: left;
  }
  .tooltip-title,
  .tooltip-value {
    font-size: v-bind("textStyle?.fontSize") !important;
    line-height: v-bind("textStyle?.height") !important;
    height: v-bind("textStyle?.height") !important;
    display: flex;
    align-items: center;
    text-align: right;
    font-weight: v-bind("textStyle?.fontWeight") !important;
    color: v-bind("textStyle?.color") !important;
  }
  .tooltip-item-icon {
    display: inline-block;
    margin-right: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
}
</style>
